<template>
	<!-- 订单管理 -->
	<view>
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar"></view>  
		<!-- #endif -->
		<navbar title="订单管理" />
		<!-- 搜索 -->
		<view class="search">
			<input type="text" confirm-type="search" v-model="key_word" @confirm="search" @input="watchInput" placeholder="输入关键字搜索" placeholder-style="color:#666666;font-size:24rpx" />
			<image src="/static/images/mine/search.png" @click="search"></image>
		</view>
		<!-- 订单状态 -->
		<tabTitle :tablist="tablist" :active="active" @tabChange="tabChange" />
		<noData v-if="orderList.length === 0" />
		<!-- 订单列表 -->
		<view class="order" v-for="(item,index) in orderList" :key="index" v-else>
			<view class="order_top">
				<view class="order_top_num">订单号：{{item.order_num}}</view>
				<view class="order_top_status" :class="{'cancel':item.status==4||item.status==6||item.status==7}">{{item.status | status}}</view>
			</view>
			<view class="line"></view>
			<view class="order_goods" @click="toDetail(item.id)">
				<image :src="item.cover_image" class="order_goods_img"></image>
				<view class="order_goods_info">
					<view class="order_goods_info_title">{{item.goods_name}}</view>
					<view class="order_goods_info_value" v-if="!item.point_price || Number(item.point_price)<=0">商品价值：￥{{item.goods_price}}</view>
					<view class="order_goods_info_integral" v-else>
						<view class="integrals">
							<view class="integral">
								<image src="/static/images/mall/integralicon.png"></image>
								{{item.point_price}}
							</view>
							<text v-if="Number(item.goods_price)>0" class="add">+</text>
							<view class="price" v-if="Number(item.goods_price)>0">￥{{item.goods_price}}</view>
						</view>
					</view>
					<view class="order_goods_info_bot">
						<view class="order_goods_info_bot_spec">{{item.spec}} <text style="margin-left: 10rpx;">x{{item.goods_num}}</text></view>
						<view class="order_goods_info_bot_price">实付款：￥{{item.price}}</view>
					</view>
				</view>
			</view>
			<view class="line" v-if="order_type==2 && item.status!=5 || order_type==3 &&item.status!=2 && item.status!=5"></view>
			<view class="order_btn" v-if="order_type==2 && item.status!=5 || order_type==3 && item.status!=5">
				<view class="order_btn_cancel" v-if="item.status==1" @click="cancelOrder(item.id)">取消订单</view>
				<view class="order_btn_confirm" v-if="item.status==1" @click="nowPay(item.id,item.pay_type)">立即支付</view>
				<view class="order_btn_refund" v-if="backdata==1&&order_type==2 && (item.status==2||item.status==3||item.status==4)" @click="refund(item.id)">申请退款</view>
				<!-- <view class="order_btn_logistics" v-if="item.status==3 || item.status==4" @click="viewLogistics(item.id)">查看物流</view> -->
				<view class="order_btn_confirm" v-if="item.status==3" @click="confirmReceipt(item.id)">确认收货</view>
				<view class="order_btn_delete" v-if="item.status==4 || item.status==6 || item.status==7" @click="deleteOrder(item.id)">删除订单</view>
			</view>
			<view class="line" v-if="order_type==1 "></view>
			<view class="order_btn" v-if="order_type==1">
				<view class="order_btn_cancel" v-if="item.status==1" @click="cancelOrder(item.id)">取消订单</view>
				<view class="order_btn_confirm" v-if="item.status==1" @click="nowPay(item.id,item.pay_type)">立即支付</view>
				<view class="order_btn_refund" v-if="backdata==1&&order_type==1 && (item.status==2||item.status==3||item.status==4)" @click="refund(item.id)">申请退款</view>
				<!-- <view class="order_btn_logistics" v-if="item.status==3 || item.status==4" @click="viewLogistics(item.id)">查看物流</view> -->
				<view class="order_btn_confirm" v-if="item.status==3" @click="confirmReceipt(item.id)">确认收货</view>
				<view class="order_btn_delete" v-if="item.status==4 || item.status==6 || item.status==7" @click="deleteOrder(item.id)">删除订单</view>
			</view>
		</view>
		<!-- 加载更多 -->
		<pullDownRefresh :status="loading" v-if="orderList.length>0" />
		<overlay ref="overlay" showSlot :showClose="false">
			<view class="logistics">
				<view class="logistics_close" @click="onClose">
					<image src="/static/images/mine/close.png"></image>
				</view>
				<view class="logistics_title">查看物流</view>
				<view class="logistics_company"><text>快递公司：</text>{{logisticsInfo.name}}</view>
				<view class="logistics_num"><text>快递单号：</text>{{logisticsInfo.express}}</view>
				<view class="logistics_progress">
					<view class="logistics_progress_title">物流进度：</view>
					<scroll-view scroll-y="true" style="height: 300rpx;">
						<view class="logistics_progress_main">
							<view class="logistics_progress_main_item" v-for="(item,index) in logisticsInfo.list" :key="index">
								<view class="logistics_progress_main_item_dots">
									<view class="dot"></view>
									<view class="dotline"></view>
								</view>
								<view class="logistics_progress_main_item_content">
									<view class="logistics_progress_main_item_content_text">{{item.step}}</view>
									<view class="logistics_progress_main_item_content_time">{{item.time}}</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</overlay>
		<overlay ref="refundframe" showSlot :showClose="false">
			<view class="refunds">
				<view class="refunds_title">申请退款</view>
				<view class="refunds_option">
					<view class="refunds_option_cur" @click="isShowoption = !isShowoption">
						<text>{{refund_method}}</text>
						<image src="/static/images/seemore.png"></image>
					</view>
					<view class="refunds_option_params" v-show="isShowoption">
						<view class="refunds_option_params_item" v-for="(params,p) in refunds_option" :key="p" @click="selectOption(params)">{{params}}</view>
					</view>
				</view>
				<textarea v-model="refund_remark_1" placeholder="填写退款说明（选填）" placeholder-style="font-size: 24rpx;font-family: Source Han Sans CN;font-weight: 400;color: #666666;"/>
				<view class="refunds_btn">
					<view class="refunds_btn_cancel" @click="cancelRefund">取消</view>
					<view class="refunds_btn_confirm" @click="confirmRefund">确定</view>
				</view>
			</view>
		</overlay>
	</view>
</template>

<script>
	import overlay from '@/components/overlay'
	import tabTitle from '@/components/tabTitle'
	import pullDownRefresh from '@/components/pullDownRefresh'
	export default {
		components:{
			overlay,
			tabTitle,
			pullDownRefresh
		},
		data() {
			return {
				id:'',
				page:1,
				key_word:'',//搜索关键字
				active:0,//当前订单状态 0全部 1待付款 2待发货 3待收货 4已完成 5退款中 6已退款 7已取消 8售后（包含5.6）
				order_type:'', //订单类型 1提货 2普通 3积分 4兑换
				tablist:['全部','待付款','待发货','待收货','已完成','售后'],//订单状态列表
				orderList:[],
				loading:0,
				logisticsInfo:[],//物流信息
				isShowoption:false,//是否显示退款主因选择列表
				refunds_option:['拍错了，重新拍','已有该商品~','产品质量有问题','物流太慢了','产品与实物不一致','其他~'],//退款主因选择
				refund_method:'选择退款原因',//退款主因
				refund_remark_1:'',//退款理由
				allowTap:true,//防误触
				backdata:0,
			}
		},
		onLoad() {
			this.$api.baseset().then(res=>{
				this.backdata=res.back_data;
				console.log(this.backdata)
			})
		},
		onShow() {
			uni.getStorage({
				key:'order_type',
				success: (res) => {
					this.order_type = res.data;
					this.page = 1;
					this.orderList = [];
					this.getOrderbuylis();
				}
			})
		},
		onReachBottom() {
			this.page++;
			this.getOrderbuylis();
		},
		filters: {
			status(value) {
				switch(value){
					case '1':
						return '待付款'
					case '2':
						return '待发货'
					case '3':
						return '待收货'
					case '4':
						return '已完成'
					case '5':
						return '退款中'
					case '6':
						return '已退款'
					case '7':
						return '已取消'
					default:
						break
				}
			}
		},
		methods: {
			//商品订单列表
			getOrderbuylis(){
				this.loading = 1;
				this.$api.orderbuylis({
					type:this.active,
					order_type:this.order_type,
					offset:this.page,
					key_word:this.key_word
				}).then(res=>{
					if(res.length>0){
						this.loading = 0;
						this.orderList = this.orderList.concat(res);
					}else{
						this.loading = 3;
						// uni.showToast({
						// 	title:'没有更多了~',
						// 	icon:'none'
						// })
					}
				})
			},
			// 搜索
			search() {
				this.page = 1;
				this.orderList = [];
				this.getOrderbuylis();
			},
			//监听输入搜索关键词
			watchInput({detail:{value}}){
				if(value == ''){
					this.page = 1;
					this.orderList = [];
					this.getOrderbuylis();
				}
			},
			//切换订单状态
			tabChange(e){
				this.active = e;
				this.page = 1;
				this.orderList = [];
				this.getOrderbuylis();
			},
			//跳转订单详情
			toDetail(id){
				uni.navigateTo({
					url:`./orderDetail?id=${id}&order_type=${this.order_type}`
				})
			},
			//取消订单
			cancelOrder(id){
				if(!this.allowTap) return
				this.allowTap = false;
				setTimeout(()=>{
					this.allowTap = true;
				},3000)
				uni.showModal({
					title:'温馨提示',
					content:'是否取消订单？',
					success: (res) => {
						if(res.confirm){
							this.$api.cancelorder({
								id,
								order_type:this.order_type,
							}).then(res=>{
								uni.showToast({
									title:'已取消订单'
								})
								setTimeout(()=>{
									this.page = 1;
									this.orderList = [];
									this.getOrderbuylis();
								},1000)
							})
						}
					}
				})
			},
			//支付前
			nowPay(id,pay_type){
				if(!this.allowTap) return
				this.allowTap = false;
				setTimeout(()=>{
					this.allowTap = true;
				},3000)
				if(this.order_type == 2){
					//普通商品获取支付参数（金额大于0）
					this.$api.shopbuygoodsb({
						order_id:id
					}).then(res=>{
						console.log('普通商品支付参数',res);
						//支付
						this.goPay(pay_type,res);
					})
				}else{
					//积分商品获取支付参数（金额大于0）
					this.$api.shopbuypgoodsb({
						order_id:id
					}).then(res=>{
						console.log('积分商品支付参数',res);
						//支付
						this.goPay(pay_type,res);
					})
				}
			},
			//去支付
			goPay(pay_type,payInfo){
				uni.showLoading({
					title:'支付中...'
				})
				if(pay_type==2){
					uni.getProvider({
						service: 'payment',
						success: (res) => {
							if (res.provider.indexOf('wxpay') != -1) {
								uni.requestPayment({
									provider: "wxpay", 
									orderInfo: payInfo,
									success: (res) => {
										console.log('success:' + JSON.stringify(res));
										uni.hideLoading();
										uni.showToast({
											title:'支付成功',
											icon:'success'
										})
										setTimeout(()=>{
											this.getOrderdatail();
										},1500)
									},
									fail: (err) => {
										console.log('fail:' + JSON.stringify(err));
										uni.hideLoading();
										uni.showToast({
											title:'支付失败，请重试',
											icon:'none'
										})
									}
								})
							}
						}
					})
				}else{
					uni.getProvider({
						service: 'payment',
						success: (res) => {
							if (res.provider.indexOf('alipay') != -1) {
								uni.requestPayment({
									"provider": "alipay", 
									"orderInfo": payInfo,
									success: (res) => {
										console.log('success:' + JSON.stringify(res));
										uni.hideLoading();
										uni.showToast({
											title:'支付成功',
											icon:'success'
										})
										setTimeout(()=>{
											this.getOrderdatail();
										},1500)
									},
									fail: (err) => {
										console.log('fail:' + JSON.stringify(err));
										uni.hideLoading();
										uni.showToast({
											title:'支付失败，请重试',
											icon:'none'
										})
									}
								})
							}
						}
					})
				}
			},
			//申请退款
			refund(id){
				this.id = id;
				this.$refs.refundframe.show();
			},
			//选择退款主因
			selectOption(item){
				this.refund_method = item;
				this.isShowoption = false;
			},
			//确认退款
			confirmRefund(){
				if(this.refund_method == '选择退款原因'){
					uni.showToast({
						title:'请选择退款原因',
						icon:'none'
					})
					return
				}
				if(!this.allowTap) return
				this.allowTap = false;
				setTimeout(()=>{
					this.allowTap = true;
				},3000)
				this.$api.refund({
					id:this.id,
					order_type:this.order_type,
					refund_method:this.refund_method,
					refund_remark_1:this.refund_remark_1
				}).then(res=>{
					uni.showToast({
						title:'申请退款成功'
					})
					setTimeout(()=>{
						this.page = 1;
						this.orderList = [];
						this.refund_method = '选择退款原因';
						this.$refs.refundframe.close();
						this.getOrderbuylis();
					},1000)
				})
			},
			//取消退款
			cancelRefund(){
				this.$refs.refundframe.close();
			},
			//查看物流
			viewLogistics(id){
				this.$api.wuliu({
					id,
					order_type:this.order_type
				}).then(res=>{
					this.logisticsInfo = res;
					this.$refs.overlay.show();
				})
			},
			//关闭查看物流
			onClose(){
				this.$refs.overlay.close();
			},
			//确认收货
			confirmReceipt(id){
				uni.showModal({
					title:'温馨提示',
					content:'是否确认收货？',
					success: (res) => {
						if(res.confirm){
							if(!this.allowTap) return
							this.allowTap = false;
							setTimeout(()=>{
								this.allowTap = true;
							},3000)
							this.$api.confirm({
								id,
								order_type:this.order_type
							}).then(res=>{
								uni.showToast({
									title:'已确认收货'
								})
								setTimeout(()=>{
									this.page = 1;
									this.orderList = [];
									this.getOrderbuylis();
								},1000)
							})
						}
					}
				})
			},
			//删除订单
			deleteOrder(id){
				uni.showModal({
					title:'温馨提示',
					content:'是否删除订单？',
					success: (res) => {
						if(res.confirm){
							if(!this.allowTap) return
							this.allowTap = false;
							setTimeout(()=>{
								this.allowTap = true;
							},3000)
							this.$api.delorder({
								id,
								order_type:this.order_type
							}).then(res=>{
								uni.showToast({
									title:'删除订单成功'
								})
								setTimeout(()=>{
									this.page = 1;
									this.orderList = [];
									this.getOrderbuylis();
								},1000)
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
page{
	padding-top: calc(var(--status-bar-height) + 100rpx);
}
.search{
	width: 690rpx;
	height: 60rpx;
	background: #FFFFFF;
	border-radius: 30rpx;
	padding: 0 32rpx;
	@include align-center;
	box-sizing: border-box;
	font-size: 24rpx;
	font-family: Source Han Sans CN;
	color: #666666;
	margin: 39rpx auto;
	position: relative;
	
	image{
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		top: 16rpx;
		right: 32rpx;
	}
	input{
		width: 90%;
	}
}
.order{
	width: 690rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
	padding: 30rpx;
	margin: 30rpx auto 0;
	
	.cancel{
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #666666;
	}
	
	&_top{
		@include between;
		
		&_num{
			ont-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #333333;
		}
		&_status{
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FF680D;
		}
	}
	.line{
		width: 630rpx;
		height: 1rpx;
		background: #E5E5E5;
		margin: 26rpx 0;
	}
	&_goods{
		@include between;
		
		&_img{
			width: 160rpx;
			height: 160rpx;
			border-radius: 10rpx;
		}
		&_info{
			height: 160rpx;
			@include column-between;
			margin-left: 30rpx;
			
			&_title{
				width: 420rpx;
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #333333;
				@include two;
			}
			&_value{
				width: 420rpx;
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #666666;
				@include two;
			}
			&_integral{
				@include between-end;
				
				.integrals{
					@include align-center;
				}
				.integral{
					font-size: 30rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #FF7000;
					@include align-center;
					
					image{
						width: 34rpx;
						height: 34rpx;
						margin-right: 18rpx;
					}
				}
				.add{
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #333333;
					margin: 0 20rpx;
				}
				.price{
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: bold;
					color: #FE3E46;
				}
			}
			&_bot{
				@include between;
				
				&_spec{
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #666666;
				}
				&_price{
					font-size: 30rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #333333;
				}
			}
		}
	}
	&_btn{
		@include end;
		
		&_cancel{
			width: 190rpx;
			height: 60rpx;
			background: #FFC7A6;
			border-radius: 30rpx;
			font-size: 30rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
			@include center;
			margin-left: 30rpx;
		}
		&_confirm{
			width: 190rpx;
			height: 60rpx;
			background: linear-gradient(180deg, #FF8584 0%, #FF660A 100%);
			border-radius: 30rpx;
			font-size: 30rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
			@include center;
			margin-left: 30rpx;
		}
		&_refund{
			width: 190rpx;
			height: 60rpx;
			background: linear-gradient(180deg, #FFD799 0%, #FF6563 100%);
			border-radius: 30rpx;
			font-size: 30rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
			@include center;
			margin-left: 30rpx;
		}
		&_logistics{
			width: 190rpx;
			height: 60rpx;
			background: linear-gradient(180deg, #FFC19E 0%, #FF186F 100%);
			border-radius: 30rpx;
			font-size: 30rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
			@include center;
			margin-left: 30rpx;
		}
		&_delete{
			width: 190rpx;
			height: 60rpx;
			background: #DCDCDC;
			border-radius: 30rpx;
			font-size: 30rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
			@include center;
			margin-left: 30rpx;
		}
	}
}
.logistics{
	width: 530rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
	padding: 40rpx 44rpx;
	position: relative;
	
	&_close{
		width: 34rpx;
		height: 34rpx;
		border-radius: 50%;
		border: 1rpx solid $main_color;
		position: absolute;
		top: 40rpx;
		right: 20rpx;
		
		image{
			width: 17rpx;
			height: 17rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
		}
	}
	&_title{
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #333333;
		text-align: center;
		
		text{
			color: #FF6408;
		}
	}
	&_company{
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		margin-top: 40rpx;
		
		text{
			font-weight: bold;
		}
	}
	&_num{
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		margin-top: 17rpx;
		
		text{
			font-weight: bold;
		}
	}
	&_progress{
		margin-top: 50rpx;
		
		&_title{
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #333333;
			margin-bottom: 30rpx;
		}
		&_main{
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #333333;
			
			&_item{
				margin-bottom: 20rpx;
				display: flex;
				align-items: flex-start;
				
				&:last-child .dotline{
					display: none;
				}
				
				&_dots{
					
					.dot{
						width: 16rpx;
						height: 16rpx;
						background: #FF6408;
						border-radius: 50%;
						margin-top: 10rpx;
						position: relative;
					}
					.dotline{
						width: 4rpx;
						height: 140rpx;
						background: #FF6408;
						position: absolute;
						left: 8rpx;
						transform: translateX(-50%);
					}
				}
				&_content{
					width: 400rpx;
					margin-left: 9rpx;
					
					&_text{
						font-size: 24rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #333333;
						overflow: hidden;
						text-overflow: ellipsis;
						display:-webkit-box; 
						-webkit-box-orient:vertical; 
						-webkit-line-clamp:3;
					}
					&_time{
						font-size: 24rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #666666;
						@include one;
					}
				}
			}
		}
	}
}
.refunds{
	width: 530rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
	padding: 37rpx 35rpx 114rpx;
	
	&_title{
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #333333;
		text-align: center;
	}
	&_option{
		margin-top: 35rpx;
		position: relative;
		
		&_cur{
			width: 460rpx;
			height: 60rpx;
			background: #FFFFFF;
			border: 1rpx solid #EEEEEE;
			border-radius: 10rpx;
			padding: 18rpx 16rpx;
			@include between;
			
			text{
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #666666;
			}
			image{
				width: 24rpx;
				height: 24rpx;
			}
		}
		&_params{
			width: 460rpx;
			background: #FFFFFF;
			border: 1rpx solid #333333;
			position: absolute;
			top: 62rpx;
			left: 0;
			z-index: 99;
			
			&_item{
				padding: 9rpx 16rpx 0;
				
				&:first-child{
					padding: 18rpx 16rpx 0;
				}
				&:last-child{
					padding: 9rpx 16rpx 18rpx;
				}
			}
		}
	}
	textarea{
		width: 460rpx;
		min-height: 200rpx;
		background: #FFFFFF;
		border: 1rpx solid #EEEEEE;
		border-radius: 10rpx;
		padding: 12rpx 15rpx;
		box-sizing: border-box;
		margin-top: 30rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #666666;
	}
	&_btn{
		@include between;
		margin-top: 62rpx;
		
		&_cancel{
			width: 204rpx;
			height: 70rpx;
			background: linear-gradient(#ff9526,#ffbc54);
			border-radius: 36rpx;
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
			@include center;
		}
		&_confirm{
			width: 204rpx;
			height: 70rpx;
			background: linear-gradient(#ff1401,#ff9224);
			border-radius: 36rpx;
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
			@include center;
		}
	}
}
</style>
